import React from 'react'
import { useNavigate } from 'react-router-dom'
import { observer } from 'mobx-react-lite'
import { useStore } from '@/store'
import { Card, Button, Checkbox, Form, Input, message } from 'antd'
import logo from '@/assets/logo.png'
import './index.scss'

function Login() {
  // 引入仓库
  const store = useStore()
  // 引入路由
  const router = useNavigate()
  const onFinish = async (values) => {
    // 校验成功回调
    await store.login.getToken(values)
    message.success('登录成功')
    // 跳转首页
    router('/', { replace: true })
  }
  return (
    <div className='login'>
      <Card className='login-container'>
        <img className="login-logo" src={logo} alt="" />
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 450,
          }}
          onFinish={onFinish}
          autoComplete="off"
          validateTrigger={['onBlur', 'onChange']}
          initialValues={
            {
              mobile: 13888888888,
              code: '246810'
            }
          }
        >
          <Form.Item
            label="账号"
            name="mobile"
          
            rules={[
              {
                required: true,
                message: '请输入账号',
                validateTrigger: 'onBlur'
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的手机号',
                validateTrigger: 'onBlur'
              }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="验证码"
            name="code"
            rules={[
              {
                required: true,
                message: '请输入验证码',
                validateTrigger: 'onBlur'
              },
              {
                pattern: /^[0-9]{6}$/,
                message: '请输入6位数字验证码',
                validateTrigger: 'onBlur'
              }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
            rules={[
              {
                validator: ((_, value) => {
                  if (value) {
                    return Promise.resolve()
                  } else {
                    return Promise.reject('请勾选协议')
                  }
                })
              }
            ]}
          >
            <Checkbox> 我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default observer(Login)